<template>
  <div>
    <div class="header">
      <!-- 添加按钮 -->
      <el-button type="primary" size="small" @click="showDia">添加</el-button>
      <!-- 输入用户名 -->
      <el-input
        placeholder="请输入关键字内容"
        v-model="sentData.content"
        style="width: 200px"
        clearable
        size="small"
      >
      </el-input>
      <!-- 输入订单编号 -->
      <el-input
        placeholder="请输入订单编号"
        v-model="sentData.orderId"
        style="width: 200px"
        clearable
        size="small"
      >
      </el-input>
      <!-- 选择状态 -->
      <el-select
        v-model="sentData.status"
        clearable
        placeholder="请选择状态"
        size="small"
      >
        <el-option label="未审核" value="未审核"> </el-option>
        <el-option label="通过" value="通过"> </el-option>
        <el-option label="未通过" value="未通过"> </el-option>
      </el-select>
      <!-- 查询按钮 -->
      <el-button type="primary" size="small" @click="btnQuery">查询</el-button>
    </div>
    <div class="content">
      <el-table
        :data="billData"
        style="width: 100%"
        :row-class-name="tableRowClassName"
      >
        <el-table-column type="index" label="编号" align="center">
        </el-table-column>
        <el-table-column prop="content" label="评论内容" align="center">
        </el-table-column>
        <el-table-column prop="customerId" label="顾客编号" align="center">
        </el-table-column>
        <el-table-column prop="orderId" label="订单编号" align="center">
        </el-table-column>
        <el-table-column prop="commentTime" label="评论时间 " align="center">
        </el-table-column>
        <el-table-column prop="status" label="评论状态" align="center">
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="handleClick(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="footer"></div>
    <div class="dia">
      <el-dialog
        title="添加订单评论"
        :visible.sync="centerDialogVisible"
        width="30%"
        center
      >
        <el-form ref="summitData" :model="summitData" label-width="80px">
          <el-form-item label="评论内容">
            <el-input v-model="summitData.content"></el-input>
          </el-form-item>
         <el-form-item label="订单编号">
            <el-input :disabled="true" v-model="summitData.orderId"></el-input>
          </el-form-item>
            <el-form-item label="顾客编号">
            <el-input :disabled="true" v-model="summitData.customerId"></el-input>
          </el-form-item>
        </el-form>
        <!-- <span>需要注意的是内容是默认不居中的</span> -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogBtnClick"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { get, post } from "@/utils/request";
export default {
  data() {
    return {
      summitData:{
        content:"",
        orderId:'1034',
        customerId:'85'
      },
      billData: [],
      sentData: {
        page: 1,
        pageSize: 100,
        content: "",
        status: "",
        beginTime: "",
        orderId: "",
      },
      centerDialogVisible: false,
    };
  },
  computed: {},
  methods: {
    async dialogBtnClick(){
      let res = await post("/orderComment/submit",this.summitData)
      this.getTalck()
      this.summitData.content = ""
      this.centerDialogVisible=false;
    },
    showDia() {
      this.centerDialogVisible = true;
    },
    async handleClick(id) {
      let res = await get("/orderComment/deleteById", { id });
      this.getTalck();
    },
    btnQuery() {
      this.getTalck();
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
    async getTalck() {
      for (const key in this.sentData) {
        if (!this.sentData[key]) {
          delete this.sentData[key];
        }
      }
      // console.log(this.sentData);
      let res = await get("/orderComment/pageQuery", this.sentData);
      this.billData = res.data.list;
      // console.log(res.data.list);
    },
  },
  created() {
    this.getTalck();
  },
  mounted() {},
};
</script>
<style scoped>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>